<template>
    <a-card :bordered="false">

        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :md="5" :sm="8">
                        <a-form-item label="经销商编码">
                            <a-input placeholder="请输入经销商编码" v-model="queryParam.companyCode"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="5" :sm="8">
                        <a-form-item label="经销商名称">
                            <a-input placeholder="请输入经销商名称" v-model="queryParam.name"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="5" :sm="8">
                        <a-form-item label="跟单员">
                            <a-select v-model="queryParam.saleRealName"
                                :getPopupContainer="node => node.parentNode" style="width: 100%" placeholder="请选择跟单员"
                                @change="$forceUpdate()" :key="queryParam.saleUserName" allowClear>
                                <a-select-option v-for="s in merchandiserList" :key="s.value" :value="s.label">
                                    {{ s.label }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="5" :sm="8">
                        <a-form-item label="渠道">
                            <a-select v-decorator="['channelId', {}]" v-model="queryParam.channelId"
                                style="width: 100%" :getPopupContainer="node => node.parentNode" placeholder="请选择渠道">
                                <a-select-option v-for="(channel, channelIdIndex) in optChannelList"
                                    :key="channel.id.toString()" :value="channel.channelId">
                                    {{ channel.name }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="5" :sm="8">
                        <a-form-item label="系统编码">
                            <a-input placeholder="请输入系统编码" v-model="queryParam.id"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="5" :sm="8">
                        <a-form-item label="经销商账号">
                            <a-input placeholder="请输入经销商账号" v-model="queryParam.account"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>

                        </span>
                    </a-col>

                </a-row>
            </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator">
            <!--      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>-->
            <a-button type="primary" icon="download" @click="handleExportXls('经销商导出')">导出</a-button>
        </div>

        <!-- table区域-begin -->
        <div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
                <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
                    selectedRowKeys.length }}</a>项
                <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            </div>

            <a-table ref="table" size="middle" bordered rowKey="storeId" :scroll="{ x: 1175 }" :columns="columns"
                :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: type }"
                @change="handleTableChange" :customRow="clickThenCheck">

                <span slot="action" slot-scope="text, record">
                    <a v-has="'store:financeApprove'" :hidden="[1].indexOf(record.status) === -1"
                        @click="handleApprove(record)">财务审核</a>
                    <!--           <a  :hidden="[1].indexOf(record.status) === -1" @click="handleApprove(record)">财务审核</a>-->
                    <!--          <a  @click="handleShow(record)">编辑</a>-->
                    <!--<a  @click="addressAdd(record)" style="margin-left: 8px">新增地址</a>-->
                    <a-button type="link" class="tableBtn" @click="handleShowDetail(record)">查看地址</a-button>
                    <a-button type="link" class="tableBtn" @click="handleAccount(record, 1)"
                        v-if="record.account == null">设置账号</a-button>
                    <a-button type="link" class="tableBtn" @click="handleAccount(record, 2)" v-else
                        v-has="'dealer:change:account'">修改账号</a-button>
                    <a-button type="link" class="tableBtn" @click="handleAccount(record, 3)" v-if="record.account"
                        v-has="'dealer:reset:password'">重置密码</a-button>
                    <a-button type="link" class="tableBtn" v-has="'dealer:edit:storeUser'"
                        @click="$refs.StmEditSalesModal.show(record)">修改跟单员</a-button>
                    <a-button v-has="'dealer:change:status'" type="link" class="tableBtn danger"
                        @click="$refs.StmUserForbiddenModal.show(record)">系统状态</a-button>
                </span>

            </a-table>
        </div>
        <!-- table区域-end -->
        <a-tabs defaultActiveKey="0">
            <a-tab-pane tab="可售物料" :key="refKeys[0]" :forceRender="true">
                <a-tabs defaultActiveKey="1" @change="handleChangeTabs">
                    <a-tab-pane v-for="(channel, index) in channelList" :key="channel.channelId"
                        :tab="channel.channelName" :forceRender="true">
                    </a-tab-pane>
                </a-tabs>
                <stm-channel-product-list2 ref="StmChannelProductList" />
            </a-tab-pane>
            <!--      <a-tab-pane tab="网点关联" :key="refKeys[1]" :forceRender="true">-->
            <!--        <stmDealerSalesRelation-ListV2JX ref="StmDealerSalesRelationListJX"></stmDealerSalesRelation-ListV2JX>-->

            <!--      </a-tab-pane>-->
        </a-tabs>
        <!-- 表单区域 -->
        <stmDealerInfo-modalV2JX ref="modalForm" @ok="modalFormOk"></stmDealerInfo-modalV2JX>
        <stm-save-address ref="stmSaveAddress" @ok="modalFormOk" />
        <stm-member-address-list ref="stmMemberAddressList" @ok="modalFormOk" />
        <stmSetAccount ref="StmSetAccount" @ok="modalFormOk" />
        <!-- <stmStoreProductListJX ref="StmStoreProductListJX" @ok="modalFormOk" /> -->
        <StmDealerInfoApproveV2ModalJX ref="StmDealerInfoApproveV2ModalJX" @ok="modalFormOk" />
        <stm-edit-sales-modal ref="StmEditSalesModal" @ok="modalFormOk" />
        <stm-user-forbidden-modal ref="StmUserForbiddenModal" @ok="modalFormOk" />



    </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import StmDealerInfoModalV2JX from './modules/StmDealerInfoModalV2JX'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import StmDealerSalesRelationListV2JX from './StmDealerSalesRelationListV2JX'
import { httpAction, getAction } from '@/api/manage'
import StmSaveAddress from "@views/stm/modules/StmSaveAddress"
import StmMemberAddressList from "@views/stm/modules/StmMemberAddressList"
import StmSetAccount from './modules/StmSetAccount'
import StmChannelProductList2 from './StmChannelProductList'
import StmDealerInfoApproveV2ModalJX from './modules/StmDealerInfoApproveV2ModalJX'
import StmEditSalesModal from './modules/StmEditSalesModal'
import StmUserForbiddenModal from './modules/StmUserForbiddenModal'

export default {
    name: 'StmDealerInfoListV2JX',
    mixins: [JeecgListMixin],
    components: {
        StmDealerInfoModalV2JX,
        StmDealerSalesRelationListV2JX,
        StmSaveAddress,
        StmMemberAddressList,
        StmSetAccount,
        StmChannelProductList2,
        StmDealerInfoApproveV2ModalJX,
        StmEditSalesModal,
        StmUserForbiddenModal
    },
    data() {
        return {
            refKeys: ['stmStoreSalesRelation', 'stmStoreProduct',],
            description: '经销商列表页面',
            channelList: [],
            optChannelList: [],
            // 表头
            columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1
                    }
                },
                {
                    title: '公司代码',
                    align: 'center',
                    width: 120,
                    dataIndex: 'partnerId'
                },
                {
                    title: '系统编码',
                    align: 'center',
                    width: 160,
                    dataIndex: 'id'
                },
                {
                    title: '经销商编码',
                    align: 'center',
                    width: 120,
                    dataIndex: 'companyCode'
                },
                {
                    title: '经销商名称',
                    align: 'center',
                    width: 300,
                    dataIndex: 'name'
                },
                {
                    title: '渠道',
                    align: 'center',
                    width: 120,
                    dataIndex: 'channelName'
                },
                // {
                //   title: '联系人',
                //   align: 'center',
                //   width: 80,
                //   dataIndex: 'linkName'
                // },
                // {
                //   title: '联系电话',
                //   align: 'center',
                //   width: 120,
                //   dataIndex: 'phone'
                // },
                {
                    title: 'SAP状态',
                    align: 'center',
                    width: 80,
                    dataIndex: 'status_dictText'
                },
                {
                    title: '系统状态',
                    align: 'center',
                    width: 80,
                    dataIndex: 'disabledStatus_dictText'
                },
                {
                    title: '跟单员',
                    align: 'center',
                    width: 100,
                    dataIndex: 'saleRealName'
                },
                {
                    title: '经销商账号',
                    align: 'center',
                    width: 120,
                    dataIndex: 'account'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    fixed: 'right',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            type: "radio",
            url: {
                list: '/stm/stmStoreInfo/list',
                productList: '/stm/stmStoreInfo/listPmsSkuStockByStoreId',
                delete: '/stm/stmStoreInfo/delete',
                generate: '/stm/stmStoreInfo/generateSkuAndStock',
                deleteBatch: '/stm/stmStoreInfo/deleteBatch',
                exportXlsUrl: 'stm/stmStoreInfo/exportXls',
                importExcelUrl: 'stm/stmStoreInfo/importExcel',
                storeChannelList: "/stm/stmChannelStoreRelation/list",
                channelListUrl: 'stm/stmChannelInfo/list',
                getMerchandiserList: 'sys/user/getDropDownList'

            },
            merchandiserList: [],

        }
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
        }
    },
    created() {
        this.getChannelList();
        this.getMerchandiserList();
        // this.queryParam.storeType = '1',
        // this.queryParam.brandCategory = 2
    },
    methods: {
        /***获取跟单员列表 */
        getMerchandiserList() {
            getAction(this.url.getMerchandiserList, {}).then(res => {
                if (res.success) {
                    this.merchandiserList = res.result;
                } else {
                    console.log(res.message)
                }
            })
        },
        clickThenCheck(record) {
            //   console.log("aaaaa");
            return {
                on: {
                    click: () => {
                        this.onSelectChange(record.storeId.toString().split(","), [record]);
                    }
                }
            };
        },
        // 选择
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
            //   this.$refs.StmDealerSalesRelationListJX.getMain(this.selectedRowKeys[0]);
            this.$refs.StmChannelProductList.getMain(this.selectionRows[0].channelId, this.selectionRows[0].id);
        },
        onClearSelected() {
            this.selectedRowKeys = [];
            this.selectionRows = [];
            this.$refs.StmChannelProductList.clear()

            //   this.$refs.StmDealerSalesRelationListJX.queryParam.mainId = null;
            //   this.$refs.StmDealerSalesRelationListJX.loadData();
            //   this.$refs.StmDealerSalesRelationListJX.selectedRowKeys = [];
            //   this.$refs.StmDealerSalesRelationListJX.selectionRows = [];
        },

        handleDelete: function (id) {
            let that = this;
            deleteAction(that.url.delete, { id: id }).then((res) => {
                if (res.success) {
                    that.$message.success(res.message);
                    that.loadData();
                    //   this.$refs.StmDealerSalesRelationListJX.loadData();
                } else {
                    that.$message.warning(res.message);
                }
            });
        },
        addressAdd(record) {
            this.$refs.stmSaveAddress.title = "新增地址";
            this.$refs.stmSaveAddress.show(record);
        },
        handleShowDetail(record) {
            this.$refs.stmMemberAddressList.title = "查看地址";
            this.$refs.stmMemberAddressList.init(record);
        },
        handleShow(record) {
            this.$refs.modalForm.edit(record);
        },
        // 查询列表，清空可售
        searchQuery: function () {
            this.selectedRowKeys = [];
            this.selectionRows = [];
            //   this.$refs.StmDealerSalesRelationListJX.queryParam.mainId = null;
            //   this.$refs.StmDealerSalesRelationListJX.loadData();
            //   this.$refs.StmDealerSalesRelationListJX.selectedRowKeys = [];
            //   this.$refs.StmDealerSalesRelationListJX.selectionRows = [];
            this.$refs.StmChannelProductList.clear()
            this.loadData(1);
        },
        handleAccount(record, type) {
            this.$refs.StmSetAccount.type = type;
            this.$refs.StmSetAccount.show(record);
        },
        handleChangeTabs(key) {
            this.$refs.StmChannelProductList.getMain(key);
        },
        getChannelList() {
            let param = {};
            param.status = 1;
            param.pageSize = 100;
            getAction(this.url.channelListUrl, param).then(res => {
                if (res.success) {
                    this.optChannelList = res.result.records;
                    this.optChannelList.push({ id: "", name: "请选择渠道" })
                    this.optChannelList.reverse();
                } else {
                    console.log(res.message)
                }
            })
        },
        handleApprove(record) {
            this.$refs.StmDealerInfoApproveV2ModalJX.title = "经销商审核";
            this.$refs.StmDealerInfoApproveV2ModalJX.edit(record);
            this.$refs.StmDealerInfoApproveV2ModalJX.disableSubmit = false;
        }
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
